<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" th:href="@{/fav.ico}">
    <link rel="stylesheet" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/global.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/css/swiper.min.css}">
    <link rel="stylesheet" th:href="@{/css/styles.css}">
    <script th:src="@{/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
    <script th:src="@{/js/bootstrap.min.js}" charset="UTF-8"></script>
    <script th:src="@{/js/swiper.min.js}" charset="UTF-8"></script>
    <script th:src="@{/js/global.js}" charset="UTF-8"></script>
    <script th:src="@{/js/jquery.DJMask.2.1.1.js}" charset="UTF-8"></script>

    <title>商场</title>
    <style>
        .my_hover {
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        .my_hover:hover {
            color: red; /* 鼠标悬浮时的颜色 */
        }
    </style>
</head>
<body>
    <!-- 顶部tab -->
    <div th:replace="fragments/common::top-tab"></div>
    <!-- 搜索栏 -->
    <div th:replace="fragments/common::search-bar"></div>

    <!-- 首页导航栏 -->
    <div class="top-nav bg3">
        <div class="nav-box inner">
            <div class="all-cat">
                <div class="title"></div>
                <div class="cat-list__box" style="background-color: rgba(48, 48, 48, .8);">
                    <th:block th:each="topCategory:${topCategoryList}">
                        <div class="cat-box">
                            <div class="title my_hover" th:text="${topCategory.name}"></div>
                            <div class="cat-list__deploy" style="width: 220px">
                                <div class="deploy-box">
                                    <th:block th:each="secondCategory:${secondCategoryList}">
                                        <div class="genre-box clearfix"
                                             th:if="${secondCategory.parentId==topCategory.id}">
                                            <a class="title"
                                                  th:href="@{/product/getProductListPage(id=${secondCategory.id})}"
                                                  th:text="${secondCategory.name}"></a>
                                        </div>
                                    </th:block>
                                </div>
                            </div>
                        </div>
                    </th:block>
                </div>
            </div>

            <ul class="nva-list">
                <a th:href="@{/}"><li class="active">首页</li></a>
                <a th:href="@{/getHotZone}" ><li>热卖专区</li></a>
                <a th:href="@{/getFullReductionZone}"><li>满减专区</li></a>
                <a th:href="@{/getDiscountZone}"><li>折扣专区</li></a>
            </ul>

        </div>
    </div>
    <!-- 顶部轮播 -->
    <div class="swiper-container banner-box">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="javascript:"><img src="http://s1h0io0hs.hd-bkt.clouddn.com/index/banner_1.png" class="cover"></a></div>
            <div class="swiper-slide"><a href="javascript:"><img src="http://s1h0io0hs.hd-bkt.clouddn.com/index/banner_2.png" class="cover"></a></div>
            <div class="swiper-slide"><a href="javascript:"><img src="http://s1h0io0hs.hd-bkt.clouddn.com/index/banner_3.png" class="cover"></a></div>
            <div class="swiper-slide"><a href="javascript:"><img src="http://s1h0io0hs.hd-bkt.clouddn.com/index/banner_4.png" class="cover"></a></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <!--     首页楼层导航-->
    <nav class="floor-nav visible-lg-block">
        <span class="scroll-nav active">爆款推荐</span>
        <th:block th:each="topCategory:${topCategoryList}">
            <span class="scroll-nav" th:text="${topCategory.name}"></span>
        </th:block>

    </nav>
    <!-- 楼层内容 -->
    <div class="content inner" style="margin-bottom: 40px;">
        <section class="scroll-floor floor-1 clearfix">
            <div class="pull-left">
                <div class="floor-title">
                    <i class="iconfont icon-tuijian fz16"></i> 爆款推荐
<!--                    <a href="" class="more"><i class="iconfont icon-more"></i></a>-->
                </div>
                <div class="con-box">
                    <a class="left-img hot-img" href="javascript:">
                        <img src="http://s1h0io0hs.hd-bkt.clouddn.com/index/floor_0.gif" alt="" class="cover">
                    </a>
                    <div class="right-box hot-box">
                        <a th:each="recommend:${recommends}" th:href="@{/product/getProductDetailPage(id=${recommend.id})}" class="floor-item">
                            <div class="item-img hot-img">
                                <img th:src="${recommend.getMainImage()}" th:alt="${recommend.getName()}" class="cover">
                            </div>
                            <div class="price clearfix">
                                <span class="pull-left cr fz16" th:text="'￥'+${recommend.getPrice()}"></span>
                            </div>
                            <div class="name ep" th:title="${recommend.getName()}" th:text="${recommend.getName()}"></div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="pull-right">
                <div class="floor-title">
                    <i class="iconfont icon-horn fz16"></i> 咨询公告
                </div>
                <div class="con-box">
                    <div class="notice-box bgf5">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <a class="swiper-slide ep" target="_blank" href="https://csdnnews.blog.csdn.net/article/details/132550849?spm=1000.2115.3001.5926">全程直播！马斯克试驾「王炸」FSD V12：45 分钟，仅一次人工干预，还去了趟小扎家！...</a>
                                <a class="swiper-slide ep" target="_blank" href="https://blog.csdn.net/w605283073/article/details/132550856?spm=1000.2115.3001.5928">为什么很多人工作 3 年 却只有 1 年经验？</a>
                                <a class="swiper-slide ep" target="_blank" href="https://csdnnews.blog.csdn.net/article/details/132541893?spm=1000.2115.3001.5927">重磅！小鹏以总对价 58.35 亿港元收购滴滴智能汽车开发业务</a>
                                <a class="swiper-slide ep" target="_blank" href="https://blog.csdn.net/OneFlow_Official/article/details/132486855?spm=1000.2115.3001.5927">https://blog.csdn.net/OneFlow_Official/article/details/132486855?spm=1000.2115.3001.5927</a>
                                <a class="swiper-slide ep" target="_blank" href="https://csdnnews.blog.csdn.net/article/details/132505618?spm=1000.2115.3001.5927">https://csdnnews.blog.csdn.net/article/details/132505618?spm=1000.2115.3001.5927</a>
                                <a class="swiper-slide ep" target="_blank" href="https://csdnnews.blog.csdn.net/article/details/132485660?spm=1000.2115.3001.5927">讯飞星火iFlyCode编程实测，领先主流开发大模型</a>
                                <a class="swiper-slide ep" target="_blank" href="https://blog.csdn.net/csdngeeknews/article/details/132554931?spm=1000.2115.3001.5928">商汤科技回应裁员赔偿 N+2；OpenAI 推出 ChatGPT 企业版；Linux 6.5 发布|极客头条</a>
                                <a class="swiper-slide ep" target="_blank" href="https://csdnnews.blog.csdn.net/article/details/132505615?spm=1000.2115.3001.5928">https://csdnnews.blog.csdn.net/article/details/132505615?spm=1000.2115.3001.5928</a>
                                <a class="swiper-slide ep" target="_blank" href="https://blog.csdn.net/csdnnews/article/details/132485673?spm=1000.2115.3001.5928">重磅来袭！2023 长沙·中国1024程序员节全面启动</a>
                                <a class="swiper-slide ep" target="_blank" href="https://csdnnews.blog.csdn.net/article/details/132186340">ISC 2023周鸿祎“出新牌”：软硬件免费推动安全行业新变革</a>
                                <a class="swiper-slide ep" target="_blank" href="https://csdnnews.blog.csdn.net/article/details/132109902">华为开发者大会2023开幕，鸿蒙生态引领全场景时代</a>
                                <a class="swiper-slide ep" target="_blank" href="https://csdnnews.blog.csdn.net/article/details/131132101">时隔一个月，讯飞星火大模型 V1.5 发布：星火 APP 登场，综合能力三大升级！</a>
                            </div>
                        </div>
                    </div>
                    <div class="buts-box bgf5">
                        <div class="but-div">
                            <a th:href="@{/getServiceCenterPage}">
                                <i class="but-icon"></i>
                                <p>物流查询</p>
                            </a>
                        </div>
                        <div class="but-div">
                            <a th:href="@{/getHotZone}">
                                <i class="but-icon"></i>
                                <p>热卖专区</p>
                            </a>
                        </div>
                        <div class="but-div">
                            <a th:href="@{/getFullReductionZone}">
                                <i class="but-icon"></i>
                                <p>满减专区</p>
                            </a>
                        </div>
                        <div class="but-div">
                            <a th:href="@{/getDiscountZone}">
                                <i class="but-icon"></i>
                                <p>折扣专区</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <th:block th:each="productVO,iterStat:${homeData}">
            <section th:class="|scroll-floor floor-${(iterStat.count)%5+1}|">
                <div class="floor-title">
                    <i class="iconfont icon-skirt fz16"></i> <a th:text="${productVO.topCategory}"></a>
                    <div class="case-list fz0 pull-right">
                        <a th:each="category:${productVO.getCategories()}" th:href="@{/product/getProductListPage(id=${category.id})}" th:text="${category.name}"></a>
                    </div>
                </div>
                <div class="con-box">
                    <a class="left-img hot-img" href="javascript:">
                        <img th:src="|http://s1h0io0hs.hd-bkt.clouddn.com/index/floor_${(iterStat.count)%4+1}.gif|" alt="" class="cover">
                    </a>
                    <div class="right-box">
                        <a th:each="product:${productVO.getProducts()}" th:href="@{/product/getProductDetailPage(id=${product.id})}" class="floor-item">
                            <div class="item-img hot-img">
                                <img th:src="${product.getMainImage()}" th:alt="${product.getName()}" class="cover">
                            </div>
                            <div class="price clearfix">
                                <span class="pull-left cr fz16" th:text="'￥'+${product.getPrice()}"></span>
                            </div>
                            <div class="name ep" th:title="${product.getName()}" th:text="${product.getName()}"></div>
                        </a>
                    </div>
                </div>
            </section>
        </th:block>
    </div>
    <script>
        $(document).ready(function(){
            // 顶部banner轮播
            var banner_swiper = new Swiper('.banner-box', {
                autoplayDisableOnInteraction : false,
                pagination: '.banner-box .swiper-pagination',
                paginationClickable: true,
                autoplay : 5000,
            });
            // 新闻列表滚动
            var notice_swiper = new Swiper('.notice-box .swiper-container', {
                paginationClickable: true,
                mousewheelControl : true,
                direction : 'vertical',
                slidesPerView : 10,
                autoplay : 2e3,
            });
            // 楼层导航自动 active
            $.scrollFloor();
            // 页面下拉固定楼层导航
            $('.floor-nav').smartFloat();
            $('.to-top').toTop({position:false});
        });
    </script>
    <!-- 右侧菜单 -->
    <div th:replace="fragments/common::right-menu"></div>
    <!-- 底部信息 -->
    <div th:replace="fragments/common::bottom-bar"></div>
</body>
</html>
